<template>
  <div class="notice-bar clearfix">
    <span class="today">今日，星期{{dateMsg}}</span>
    <vueSeamless :data="listData" :class-option="seamlessOpt" class="seamless-warp">
      <ul class="notice-link">
        <li v-for="(item, index) in listData" :key="index">
          <el-link type="danger" href="#">{{item.title}}</el-link>
        </li>
      </ul>
    </vueSeamless>
    <div class="user-and-help">
      <el-dropdown class="user-name" trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <i class="el-icon-s-custom"></i>{{user.userName}}<i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="handleLogout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span class="line">|</span>
      <el-link href="#" class="help">帮助中心</el-link>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { parseTime } from '@/utils'
import vueSeamless from 'vue-seamless-scroll'
import { userlogout } from '@/api/user'
import * as types from '@/store/mutation-types'
export default {
  name: 'NoticeBar',
  data () {
    return {
      dateMsg: '',
      listData: [
        {
          title: '十多个电饭锅电饭锅地方十多个电饭锅电饭锅地方十多个电饭锅电饭锅地方十多个电饭锅电饭锅地方十多个电饭锅电饭锅地方十多个电饭锅电饭锅地方十多个电饭锅电饭锅地方十多个电饭锅电饭锅地方十多个电饭锅电饭锅地方'
        },
        {
          title: '系统通知，南阳市政府发布系统通知，南阳市政府发布系统通知，南阳市政府发布系统通知，南阳市政府发布'
        },
        {
          title: '让他回家的规范化山东人访问让他回家的规范化山东人访问让他回家的规范化山东人访问'
        },
        {
          title: '就突然物色女史蒂芬森就突然物色女史蒂芬森就突然物色女史蒂芬森就突然物色女史蒂芬森'
        },
        {
          title: '也是大V呈现出不是的也是大V呈现出不是的也是大V呈现出不是的也是大V呈现出不是的'
        },
        {
          title: '瑞特地方八卦惹急瑞特地方八卦惹急瑞特地方八卦惹急瑞特地方八卦惹急'
        },
        {
          title: '个图通用技术为二次对公户个图通用技术为二次对公户'
        },
        {
          title: '如鱼豆腐ETYUIHJSFARE'
        }
      ]
    }
  },
  computed: {
    ...mapState([
      'user'
    ]),
    seamlessOpt () {
      return {
        step: 0.5,
        // limitMoveNum: 5,
        singleHeight: 28,
        waitTime: 2000
      }
    }
  },
  components: {
    vueSeamless
  },
  methods: {
    handleCommand (command) {
      if (command === 'handleLogout') {
        this.$confirm('确定退出登录?', '退出登录', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          userlogout().then((res) => {
            this.$store.commit(types.DEL_USER)
            this.$router.push({ path: '/login' })
          })
        })
      }
    }
  },
  mounted () {
    this.timer = setInterval(() => {
      this.dateMsg = parseTime(new Date(), '{a} {y}-{m}-{d} {h}:{i}:{s}')
    }, 1000)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style lang="scss" scoped>
.notice-bar {
  height: 28px;
  padding: 6px 20px;
  position: relative;
  line-height: 1;
  background-color: #f7f8f9;
  overflow: hidden;
  .today {
    font-size: 12px;
    position: absolute;
  }
  .seamless-warp {
    height: 16px;
    overflow: hidden;
  }
  .notice-link {
    width: 50%;
    text-align: center;
    margin: 0 auto;
    list-style: none;
    padding: 0;
    li {
      height: 28px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      .el-link {
        display: inline;
      }
    }
    a {
      text-decoration: underline;
    }
  }
  .user-and-help {
    position: absolute;
    right: 20px;
    top: 6px;
    .user-name {
      cursor: pointer;
      margin-right: 10px;
    }
    .line {
      color: #c5c5c5;
    }
    .help {
      margin-left: 10px;
    }
  }
}
</style>
